<template>
  <div>
    <public-head :title="title" :path="path" />
    <div class="wrap">
      <!-- 选择框 -->
      <div class="chooseBox">
        <div class="chooseLine">
          <van-cell title="全部线路" is-link />
        </div>

        <div class="chooseDate">
          <van-cell title="2021-05-20" is-link />
        </div>
      </div>

      <!-- 环形饼图 -->
      <div class="pieChart">
        <div class="pieChartInfo">
          <div class="pieChartInfoLeft">
            累计完成:
            <span>{{ pieChartPercent.leijiwancheng }}</span>
          </div>
          <div class="pieChartInfoRight">
            本月完成:
            <span>{{ pieChartPercent.benyuewancheng }}</span>
          </div>
        </div>

        <div class="pieChartContainer">
          <pie-chart
            :pieChartData="pieChartData"
            :id="pieChartId"
            :width="pieChartWidth"
            :height="pieChartHeight"
          />
        </div>
      </div>

      <!-- 数据 -->
      <div class="content">
        <public-column :PublicColumnData="PublicColumnDataTop" />
        <div class="columnCenter">
          <div class="columnCenterLeft">
            <p class="redNum">{{ columnCenterLeftData.num }}</p>
            <p class="columnName">{{ columnCenterLeftData.title }}</p>
          </div>
          <div class="columnCenterRight">
            <p class="blueNum">{{ columnCenterRightData.num }}</p>
            <p class="columnName">{{ columnCenterRightData.title }}</p>
          </div>
        </div>
        <public-column :PublicColumnData="PublicColumnDataBottom" />
        <div class="columnCenter">
          <div class="columnCenterLeft">
            <p class="redNum">{{ columnCenterLeftData.num }}</p>
            <p class="columnName">{{ columnCenterLeftData.title }}</p>
            <p class="columnUnit">{{ columnCenterLeftData.unit }}</p>
          </div>
          <div class="columnCenterRight">
            <p class="blueNum">{{ columnCenterRightData.num }}</p>
            <p class="columnName">{{ columnCenterRightData.title }}</p>
            <p class="columnUnit">{{ columnCenterRightData.unit }}</p>
          </div>
        </div>
      </div>

      <!-- 车辆碎修图表 -->
      <div class="chartCointainer">
        <div class="chartCointainerTitle">
          月度车辆碎修统计
        </div>
        <div class="lineChartContainer">
          <line-chart
            :lineChartData="lineChartData"
            :id="lineChartId"
            :width="lineChartWidth"
            :height="lineChartHeight"
          />
        </div>
        <div class="outsidePieChartContainer">
          <outside-pie-chart
            :outsidePieChartData="outsidePieChartData"
            :id="outsidePieChartId"
            :width="outsidePieChartWidth"
            :height="outsidePieChartHeight"
          />
        </div>
        <div class="chartBottom">
          <van-cell
            title="月度车辆碎修统计表"
            is-link
            value="查看详情"
          />
        </div>
      </div>
      <div class="cell-pub">
        <van-cell title="车辆故障趋势对比" is-link arrow-direction="down"  />
      </div>
      <div class="cell-pub">
        <van-cell title="车辆系统健康评估" is-link arrow-direction="down"  />
      </div>
    </div>
  </div>
</template>
<script>
import PublicHead from "../../../components/PublicHead";
import PieChart from "../../charts/PieChart.vue";
import LineChart from "../../charts/LineChart.vue";
import OutsidePieChart from "../../charts/OutsidePieChart.vue";
import PublicColumn from "../../../components/PublicColumn";

export default {
  name: "carReport",
  components: {
    PublicHead,
    PieChart,
    PublicColumn,
    LineChart,
    OutsidePieChart,
  },
  data() {
    return {
      title: "计划指标",
      path: "carReport",
      pieChartPercent: {
        leijiwancheng: "97.45%",
        benyuewancheng: "97.45%",
      },
      pieChartId: "pieChart",
      pieChartWidth: "100%",
      pieChartHeight: "100%",
      pieChartData: [
        {
          name: "a",
          value: 10,
        },
        {
          name: "b",
          value: 20,
        },
        {
          name: "c",
          value: 40,
        },
        {
          name: "d",
          value: 30,
        },
      ],
      PublicColumnDataTop: [
        {
          title: "临修",
          num: 0,
          type: 0,
        },
        {
          title: "掉线",
          num: 1,
          type: 1,
        },
        {
          title: "晚点",
          num: 0,
          type: 2,
        },
      ],
      columnCenterLeftData: {
        num: 0.029,
        title: "全年己画百万公里故障率",
        unit: "(公里)",
      },
      columnCenterRightData: {
        num: 0.029,
        title: "全年己画百万公里故障率",
        unit: "(公里)",
      },
      PublicColumnDataBottom: [
        {
          title: "本月故障延时",
          num: 0,
          type: 0,
        },
        {
          title: "年度故障延时",
          num: 1,
          type: 1,
        },
        {
          title: "年度指标",
          num: 0,
          type: 2,
        },
      ],
      lineChartId: "lineChart",
      lineChartWidth: "100%",
      lineChartHeight: "100%",
      lineChartData: {
        title: "车辆碎修趋势图(2021年1月)",
        data: [
          {
            name: "a",
            data: [
              {
                time: "01-01",
                value: 65,
              },
              {
                time: "01-03",
                value: 50,
              },
              {
                time: "01-06",
                value: 125,
              },
              {
                time: "01-09",
                value: 66,
              },
              {
                time: "01-12",
                value: 70,
              },
              {
                time: "01-15",
                value: 23,
              },
              {
                time: "01-18",
                value: 64,
              },
              {
                time: "01-21",
                value: 100,
              },
              {
                time: "01-24",
                value: 50,
              },
              {
                time: "01-27",
                value: 120,
              },
            ],
          },
          {
            name: "b",
            data: [
              {
                time: "01-01",
                value: 130,
              },
              {
                time: "01-03",
                value: 40,
              },
              {
                time: "01-06",
                value: 60,
              },
              {
                time: "01-09",
                value: 102,
              },
              {
                time: "01-12",
                value: 50,
              },
              {
                time: "01-15",
                value: 90,
              },
              {
                time: "01-18",
                value: 28,
              },
              {
                time: "01-21",
                value: 120,
              },
              {
                time: "01-24",
                value: 80,
              },
              {
                time: "01-27",
                value: 49,
              },
            ],
          },
        ],
      },
      outsidePieChartId: "outsidePieChart",
      outsidePieChartWidth: "100%",
      outsidePieChartHeight: "100%",
      outsidePieChartData: {
        title: "车辆碎修趋势图(2021年1月)",
        data: [
          {
            name: "地铁1",
            value: 62.7,
          },
          {
            name: "地铁2",
            value: 7.6,
          },
          {
            name: "地铁3",
            value: 1.9,
          },
          {
            name: "地铁4",
            value: 4.0,
          },
          {
            name: "地铁5",
            value: 5.6,
          },
          {
            name: "地铁6",
            value: 7.2,
          },
          {
            name: "地铁7",
            value: 10.6,
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap{
    width 345px
    margin-left 15px
		.chooseBox{
			margin 10px 0
			width 100%
			background-color #fff
			display flex
			justify-content space-between
		}
		.pieChart{
      background-color #fff
      width 100%
      margin-bottom 10px
      box-sizing border-box
      padding 10px
      .pieChartInfo{
        background-color rgb(255,244,205)
        border-radius 8px
        width 90%
        margin 0 auto
        margin-bottom 10px
        display flex
        justify-content space-around
        font-size 11px
        line-height 44px
        height 44px
        .pieChartInfoLeft,.pieChartInfoRight{
          color rgb(249,84,37)
        }
      }
      .pieChartContainer{
        width 250px
        height 250px
        margin 0 auto
      }
    }

		.columnCenter{
			width 100%
			display flex
			justify-content space-between
			margin-top 10px
			.columnCenterLeft,.columnCenterRight{
				width 48%
				background-color #fff
				border-radius 5px
				text-align center
				box-sizing border-box
				padding 10px 5px
			}
			.redNum,.blueNum,.columnName,.columnUnit{
				font-size 10px
				height 20px
				line-height 20px
			}
			.redNum{
				color rgb(249,84,37)
			}
			.blueNum{
				color rgb(25,138,255)
			}
			.columnUnit{
				color rgb(102,102,102)
			}
		}
		.chartCointainer{
			width 100%
			margin-top 10px
			background-color #fff
			border-radius 5px
			box-sizing border-box
			padding 20px 5px
			.chartCointainerTitle{
				margin-left 5px
			}
			.lineChartContainer{
				width 345px
				height 128px
			}
			.outsidePieChartContainer{
				height 260px
			}
      .chartBottom{
        width 96%
        margin 0 auto
        border-radius 5px
        box-shadow darkgrey 0px 0px 5px 0.5px
        overflow hidden
      }
		}
    .cell-pub{
      margin-top 10px
      border-radius 5px
      color #fff
      overflow hidden
    }

}
</style>
